<!-- 重点参数：changeNavgContent -->
<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/chang-navg-content.html -->
    <base href="{$protocol}webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/" />
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>动态修改巡航器</title>
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
            margin: 0px;
        }

        #loadingTip {
            position: absolute;
            z-index: 9999;
            top: 0;
            left: 0;
            padding: 3px 10px;
            background: red;
            color: #fff;
            font-size: 14px;
        }
    </style>
</head>

<body>
<div id="container"></div>
<script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.5&key=您申请的key值'></script>
<!-- UI组件库 1.0 -->
<script src="{$protocol}webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type="text/javascript">
    //创建地图
    var map = new AMap.Map('container', {
        center :{$center},
        zoom: 4
    });


    function initPage(PathSimplifier, $) {

        var emptyLineStyle = {
            lineWidth: 0,
            fillStyle: null,
            strokeStyle: null,
            borderStyle: null
        };

        var pathSimplifierIns = new PathSimplifier({
            zIndex: 100,
            //autoSetFitView:false,
            map: map, //所属的地图实例

            getPath: function(pathData, pathIndex) {

                return pathData.path;
            },
            getHoverTitle: function(pathData, pathIndex, pointIndex) {

                if (pointIndex >= 0) {
                    //point
                    return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length;
                }

                return pathData.name + '，点数量' + pathData.path.length;
            },
            renderOptions: {
                pathLineStyle: {
                    lineWidth: 3,
                    strokeStyle: '#ef00ff',
                    borderWidth: 1,
                    borderStyle: '#c6c6ca',
                    dirArrowStyle: false
                },
                renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
            }
        });

        window.pathSimplifierIns = pathSimplifierIns;

        pathSimplifierIns.setData([{
            name: '测试',
            path: {$local}
        }]);

        //initRoutesContainer(d);

        function onload() {
            pathSimplifierIns.renderLater();
        }

        function onerror(e) {
            alert('图片加载失败！');
        }

        var pathNavigatorStyles = [
            {
                width: 16,
                height: 32,
                //使用图片
                content: PathSimplifier.Render.Canvas.getImageContent('./imgs/car.png', onload, onerror),
            }
        ];


        function extend(dst) {
            if (!dst) {
                dst = {};
            }

            var slist = Array.prototype.slice.call(arguments, 1);

            for (var i = 0, len = slist.length; i < len; i++) {
                var source = slist[i];

                if (!source) {
                    continue;
                }

                for (var prop in source) {
                    if (source.hasOwnProperty(prop)) {
                        dst[prop] = source[prop];
                    }
                }
            }
            return dst;
        }

        var idx = 0;
//对第一条线路（即索引 0）创建一个巡航器
        var navg1 = pathSimplifierIns.createPathNavigator(0, {
            loop: true,
            speed: 1000,
            pathNavigatorStyle: extend({}, pathNavigatorStyles[0])
        });

        navg1.start();

        function changeNavgContent() {

            //获取到pathNavigatorStyle的引用
            var pathNavigatorStyle = navg1.getStyleOptions();

            //覆盖修改
            extend(pathNavigatorStyle, pathNavigatorStyles[(++idx) % pathNavigatorStyles.length]);

            //重新绘制
            pathSimplifierIns.renderLater();
        }

        setInterval(changeNavgContent, 500);
    }

    AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {

        if (!PathSimplifier.supportCanvas) {
            alert('当前环境不支持 Canvas！');
            return;
        }

        initPage(PathSimplifier, $);

    });

</script>
</body>

</html>